﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<div id="app">
	<table width="100%">
		<tr>
			<td>
				<p color="black">
					您正在做的业务是：人力资源--人力资源档案管理--人力资源档案查询
				</p>
			</td>
		</tr>
		<tr>
			<td align="right">
				<input type="button" value="查询" class="BUTTON_STYLE1"
					   v-on:click="cha">
				<input type="button" value="搜索" class="BUTTON_STYLE1"
					   v-on:click="ss">

			</td>
		</tr>
	</table>
	<table width="100%" border="1" cellpadding=0 cellspacing=1
		   bordercolorlight=#848284 bordercolordark=#eeeeee
		   class="TABLE_STYLE1">
		<tr class="TR_STYLE1">
			<td width="14%" class="TD_STYLE1">
				请选择员工所在I级机构
			</td>
			<td width="104%" class="TD_STYLE2">
				<select v-model="obj.firstKindName" id="thirdKindId" size="5" class="SELECT_STYLE2">
					<option value="NULL" selected="selected">全部</option>

					<option v-for="option in firstoptions" :key="option.ffkId" :value="option.firstKindName" v-on:click="jly(option.firstKindId)">{{ option.firstKindName }}</option>

				</select>
			</td>
		</tr>
		<tr class="TR_STYLE1">
			<td width="14%" class="TD_STYLE1">
				请选择员工所在II级机构
			</td>
			<td width="104%" class="TD_STYLE2">
				<select v-model="obj.secondKindName" id="thirdKindId" size="5" class="SELECT_STYLE2">
					<option value="NULL" selected="selected">全部</option>

					<option v-for="option in secondoptions" :key="option.fskId" :value="option.secondKindName" v-on:click="jle(option.secondKindId)">{{ option.secondKindName }}</option>

				</select>
			</td>
		</tr>
		<tr class="TR_STYLE1">
			<td width="14%" class="TD_STYLE1">
				请选择员工所在III级机构
			</td>
			<td width="104%" class="TD_STYLE2">
				<select v-model="obj.thirdKindName" id="thirdKindId" size="5" class="SELECT_STYLE2">
					<option value="NULL" selected="selected">全部</option>

					<option v-for="option in thirdoptions" :key="option.ftkId" :value="option.thirdKindName">{{ option.thirdKindName }}</option>

				</select>
			</td>
		</tr>
		<tr class="TR_STYLE1">
			<td width="14%" class="TD_STYLE1">
				请选择职位分类
			</td>
			<td width="104%" class="TD_STYLE2">
				<select v-model="obj.majorKindName" id="thirdKindId" size="5" class="SELECT_STYLE2">
					<option value="NULL" selected="selected">全部</option>

					<option v-for="option in majorKindoptions" :key="option.mfkId" :value="option.majorKindName" v-on:click="jls(option.majorKindId)">{{ option.majorKindName }}</option>

				</select>
			</td>
		</tr>
		<tr class="TR_STYLE1">
			<td width="14%" class="TD_STYLE1">
				请选择职位名称
			</td>
			<td width="104%" class="TD_STYLE2">
				<select v-model="obj.majorName" id="thirdKindId" size="5" class="SELECT_STYLE2">
					<option value="NULL" selected="selected">全部</option>

					<option v-for="option in majoroptions" :key="option.makId" :value="option.majorName">{{ option.majorName }}</option>

				</select>
			</td>
		</tr>
		<tr>

			<td class="TD_STYLE1">
				请输入建档时间
			</td>
			<td class="TD_STYLE2">
				<el-date-picker v-model="dateRange"
								type="daterange"
								range-separator="To"
								start-placeholder="Start date"
								end-placeholder="End date"
								:size="size"
								v-on:change="handleDateChange" />
			</td>
		</tr>
	</table>
</div>
<script>
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			const dateRange = ref([])
			const obj = reactive({
				firstKindName: '',
				secondKindName: '',
				thirdKindName: '',
				majorKindName: '',
				majorName: '',
				startDate: Date.startDate,
				endDate: Date.endDate
			})
			const firstoptions = ref();
			const secondoptions = ref();
			const thirdoptions = ref();
			const majorKindoptions = ref();
			const majoroptions = ref();
			axios.get('/CFFK/GetCFFK')
				.then(res => {
					firstoptions.value = res.data
				})
			// axios.get('/CFSK/GetCFSK')
			// 	.then(res => {
			// 		secondoptions.value = res.data
			// 	})
			// axios.get('/CFTK/GetCFTK')
			// 	.then(res => {
			// 		thirdoptions.value = res.data
			// 	})
			// axios.get('/GetCM')
			// 	.then(res => {
			// 		majoroptions.value = res.data
			// 	})
			axios.get('/GetCMK')
				.then(res => {
					majorKindoptions.value = res.data
				})
			const handleDateChange = (value) => {
				obj.startDate = new Date(value[0]).toLocaleString('zh-CN', {
					year: 'numeric',
					month: 'numeric',
					day: 'numeric'
				});
				obj.endDate = new Date(value[1]).toLocaleString('zh-CN', {
					year: 'numeric',
					month: 'numeric',
					day: 'numeric'
				});
				console.log('Start Date:', obj.startDate)
				console.log('End Date:', obj.endDate)
			}
			let str = ref(null);
			function cha() {
				const queryParams = new URLSearchParams();
				queryParams.set('rowData', JSON.stringify(obj));
				window.location.href = `/HFInquire/Index1?${queryParams.toString()}`;
			}
			function jly(zhi) {
				console.log(zhi);
				axios.get(`/GetCFSKById/${zhi}`).then(response => {
					secondoptions.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
				obj.secondKindName = "";
				obj.thirdKindName = "";
			}
			function jle(zhi) {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.get('/GetCFTKById/' + zhi).then(response => {
					thirdoptions.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
				obj.thirdKindName = "";
			}
			//点击一级下拉框，出现二级
			function jls(zhi) {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.get('/GetCMById/' + zhi, {
					id: zhi
				}).then(response => {
					majoroptions.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
				obj.majorName = "";
			}
			function ss(){
				window.location.href = `/HFInquire/Index3`;
			}
			return {
				firstoptions,
				secondoptions,
				thirdoptions,
				majorKindoptions,
				majoroptions,
				cha,
				str,
				obj,
				dateRange,
				handleDateChange,
				jly,
				jle,
				jls,
				ss
			}
		}
	})
	app.use(ElementPlus)
	app.mount("#app");
</script>
<style>
	/* CSS Document */
	* {
		FONT-FAMILY: 微软雅黑;
	}

	.resizeDivClass {
		position: relative;
		background-color: #DEDBD6;
		width: 2;
		z-index: 1;
		left: expression(this.parentElement.offsetWidth-1);
		cursor: e-resize;
	}

	A:visited {
		TEXT-DECORATION: none
	}

	A:active {
		TEXT-DECORATION: none
	}

	A:hover {
		TEXT-DECORATION: underline overline
	}

	A:link {
		TEXT-DECORATION: none
	}

	.t {
		LINE-HEIGHT: 1.4
	}

	BODY {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		display: block;
		margin: 8px;
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	DIV {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	FORM {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	OPTION {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	P {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	BR {
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	TEXTAREA {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	SELECT {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	.gray {
		CURSOR: pointer;
		FILTER: gray
	}

	.style3 {
		font-size: 16px;
		font-weight: bold;
	}

	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #000000;
		border-collapse: collapse;
		width: 100%;
	}

	.TABLE_STYLE2 {
		width: 100%;
	}

	.ALL-STYLE {
		border: 1px ridge #666666;
		border-color: #DEDBD6;
	}

	.TR_STYLE1 {
	}

	.style8 {
		color: #000066
	}



	.TD_HANDBOOK_STYLE1 {
		vertical-align: top;
		width: 100%;
		color: #0000FF;
	}

	.TD_STYLE1 {
		background-color: #FFDB6F;
		border-width: 1;
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		background-color: #FFFFBB;
		border-color: #DEDBD6;
		border: 0;
	}

	.TD_STYLE3 {
	}

	.SUBMIT_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.BUTTON_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RESET_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RADIO_STYLE1 {
	}

	.CHECKBOX_STYLE1 {
	}

	.SELECT_STYLE1 {
		width: 100%;
	}

	.SELECT_STYLE2 {
		width: 30%;
	}

	.TEXTAREA_STYLE1 {
		width: 100%;
	}

	.DIV_STYLE1 {
		float: right;
		vertical-align: top;
	}

	.DIV_STYLE2 {
		float: center;
		vertical-align: top;
	}

	.INPUT_STYLE1 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 30%
	}

	.INPUT_STYLE2 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 100%
	}

	.FILE_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseout {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseover {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mousedown {
		BORDER-RIGHT: #FFE400 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #FFE400 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #FFE400 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #FFE400 1px solid
	}

	.btn3_mouseup {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.custom-select .el-input__inner {
		background-color: transparent;
		border: 1px solid #ccc; /* 或者其他你想要的边框颜色 */
	}
</style>
<style>
	body {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: .8em;
	}

	/* the div that holds the date picker calendar */
	.dpDiv {
	}


	/* the table (within the div) that holds the date picker calendar */
	.dpTable {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-align: center;
		color: #505050;
		background-color: #ece9d8;
		border: 1px solid #AAAAAA;
	}


	/* a table row that holds date numbers (either blank or 1-31) */
	.dpTR {
	}


	/* the top table row that holds the month, year, and forward/backward buttons */
	.dpTitleTR {
	}


	/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTR {
	}


	/* the bottom table row, that has the "This Month" and "Close" buttons */
	.dpTodayButtonTR {
	}


	/* a table cell that holds a date number (either blank or 1-31) */
	.dpTD {
		border: 1px solid #ece9d8;
	}


	/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlightTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
	}


	/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
	.dpTDHover {
		background-color: #aca998;
		border: 1px solid #888888;
		cursor: pointer;
		color: red;
	}


	/* the table cell that holds the name of the month and the year */
	.dpTitleTD {
	}


	/* a table cell that holds one of the forward/backward buttons */
	.dpButtonTD {
	}


	/* the table cell that holds the "This Month" or "Close" button at the bottom */
	.dpTodayButtonTD {
	}


	/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
		color: white;
	}


	/* additional style information for the text that indicates the month and year */
	.dpTitleText {
		font-size: 12px;
		color: gray;
		font-weight: bold;
	}


	/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlight {
		color: 4060ff;
		font-weight: bold;
	}


	/* the forward/backward buttons at the top */
	.dpButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
		padding: 0px;
	}


	/* the "This Month" and "Close" buttons at the bottom */
	.dpTodayButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
	}
</style>
